<template>
  <div>
    <el-tabs type="border-card">
      <div v-if="menuGrantList.length > 0 && openType != 'view'">
        <el-button
          icon="el-icon-plus"
          size="mini"
          autofocus
          @click="menuGrantAll"
          >全选</el-button
        >
        <el-button
          icon="el-icon-minus"
          size="mini"
          autofocus
          @click="menuGrantEmpty"
          >清空</el-button
        >
      </div>
      <el-tree
        :data="menuGrantList"
        show-checkbox
        node-key="id"
        ref="treeMenu"
        :default-checked-keys="menuTreeObj"
        :props="props"
      >
      </el-tree>
    </el-tabs>
  </div>
</template>

<script>
import { getRole, grantTree } from "@/api/system/role";
export default {
  props: {
    openType: { //dialog打开方式
      type: String,
      default: ''
    },
  },
  data() {
    return {
      props: { //菜单权限数据 props
        label: "title",
        value: "key",
        disabled: this.isDisabledFn
      },
      menuGrantList: [], //存放树形菜单权限的data
      menuTreeObj: [], //用户已有菜单权限数据
    };
  },
  created() {
    
  },
  methods: {
    /**
     * @func 菜单权限数据获取
     * @desc 菜单权限数据获取 
     * @param {String} sceneType - 场景类型 获取不同接口数据
     * @param {String} userType - 用户类型 接口传参
     * @param {Number} userId - 用户ID 接口传参
     * @param {Array} menuTreeObj - 已配置菜单数据
     * */
    getMenuGrant(sceneType, userType, {userId, menuTreeObj}) {
      this.menuGrantList = [];
      this.menuTreeObj = [];
      if (sceneType === "init") {
        grantTree(userType).then((res) => {
          this.menuGrantList = res.data.data.menu;
          this.$nextTick(() => {
            this.$refs.treeMenu.setCheckedNodes(this.menuGrantList);
          });
        });
      } else if (sceneType === "audit") {
        grantTree(userType).then((res) => {
          this.menuGrantList = res.data.data.menu;
          this.$nextTick(() => {
            this.menuTreeObj = menuTreeObj;
          });
        });
      } else if (sceneType === "details") {
        grantTree(userType).then((res) => {
          this.menuGrantList = res.data.data.menu;
          getRole(userId).then((res) => {
            this.menuTreeObj = res.data.data.menu;
          });
        });
      }
    },
    /**
     * @func 菜单权限全选
     * @desc 选中状态处理 (全选)
     * @param {Array} menuGrantList - 菜单权限集合
     * */
    menuGrantAll() {
      this.$nextTick(() => {
        this.$refs.treeMenu.setCheckedNodes(this.menuGrantList);
      });
    },
    /**
     * @func 菜单权限清空
     * @desc 选中状态处理 (清空)
     * @param {Array} menuGrantList - 菜单权限集合
     * */
    menuGrantEmpty() {
      this.$nextTick(() => {
        this.$refs.treeMenu.setCheckedKeys([]);
      });
    },
    /**
     * @func 菜单权限树形是否禁止
     * @desc dialog打开类型为 view 则禁止权限树
     * @param {String} openType - 打开类型
     * */
    isDisabledFn() {
      const _this = this;
      if (["view"].includes(_this.openType)) {
        return true
      }
    },
  },
};
</script>

<style>
</style>